import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('@/views/Layout'),
    children: [
      { path: '/', redirect: '/index' },
      { path: '/index', component: () => import('@/views/Home') },
      { path: '/about', component: () => import('@/views/About') },
      // 常用于相同结构内容不同的页面比如文章内容页，详情页
      { path: '/artcle/:id', name: 'artclePage', component: () => import('@/views/day6/ArtclePage') },
      { path: '/list', name: 'listPage', component: () => import('@/views/day6/ListPage') }
    ]

  },
  {
    path: '/day1',
    name: 'day1',
    component: () => import('@/views/day1')
  },
  {
    path: '/day2',
    name: 'day2',
    component: () => import('@/views/day2')
  },
  {
    path: '/day3',
    name: 'day3',
    component: () => import('@/views/day3')
  },
  {
    path: '/day4',
    name: 'day4',
    component: () => import('@/views/day4')
  },
  {
    path: '/day5',
    name: 'day5',
    component: () => import('@/views/day5')
  },
  {
    path: '/day7',
    name: 'day7',
    component: () => import('@/views/day7')
  },
  {
    path: '/day8',
    name: 'day8',
    component: () => import('@/views/day8')
  },
  {
    path: '/day9',
    name: 'day9',
    component: () => import('@/views/day9')
  },
  {
    path: '/day10',
    name: 'day10',
    component: () => import('@/views/day10')
  },
  {
    path: '/day11',
    name: 'day11',
    component: () => import('@/views/day11')
  },
  {
    path: '/day12',
    name: 'day12',
    component: () => import('@/views/day12')
  },
  {
    path: '*',
    component: () => import('@/views/ErrorPage')
  }
]

const router = new VueRouter({
  routes
})
router.beforeEach((to, from, next) => {
  NProgress.inc()
  next()
})

router.afterEach(() => {
  NProgress.done()
})
export default router
